$bghover:rgb(219, 219, 219);

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
.wrap{
    display: flex;
    flex-direction: column;
    
    header{
        display: flex;
        background: linear-gradient(to bottom, #f4f5f9 60%, #e2e2e2);
        .logo{
            height: 70px;
            margin: 0 50px 0 60px;
            img{
                display: block;
                height: 100%;
            }
        }
        
        nav{
            ul{
                display: flex;
                height: 70px;
                li{
                        
                        border: 0px solid #000;
                        border-right-width: 1px;
                        border-image: linear-gradient(#fff,rgba(0,0,0,0.2)) 1;
                        position: relative; 
                        &:last-of-type{
                            border: none;
                        } 
                    a{
                        height: 70px;
                        line-height: 70px;
                        display: block;
                        width: 150px;
                        text-align: center;
                        color: #000;
                    }
                    &:hover .drowmenu{
                        display: block;
                    }
                    .drowmenu{
                        position: absolute;
                        display: none;
                        
                        ul{
                            display: flex;
                            flex-direction: column;
                            li{
                                border: none;
                                background: linear-gradient(to bottom, #f4f5f9 60%, #e2e2e2);
                                &:hover{
                                    background: $bghover;
                                }
                            } 
                        }

                    }
                }
                
            }
        }

        


    }

    .lunbotu{
        width: 100%;
        position: relative;
         img{
             width: 100%; 
             vertical-align: middle;
         }
         p{
            color: white;
            position: absolute;
            display: block;
            &:nth-of-type(1){
                top:10px;
                left:300px;
            }
            &:nth-of-type(2){
                font-size: 45px;
                line-height: 40px;
                font-weight: bold;
                top:150px;
                left:300px;
            }
            &:nth-of-type(3){
                font-size: 17px;
                font-style: italic;
                top:190px;
                left:300px;
            }
            &:nth-of-type(4){
                font-size: 25px;
                font-weight: bold;
                top:230px;
                left:300px;
            }
         }
    .viedo{
        position: absolute;
        width:135px;
        height:85px;
        top: 300px;
        left:300px;
        border: 5px solid white;
        img{
            width: 135px;
        }
    }     
    .buttonbox{
        position: absolute;
            top:420px;
            left:300px;
           
            font-size: 15px;
        button{
            width: 120px;
            height: 50px;
            border: none;
            border-radius: 5px;
            color: white;
            background: linear-gradient(to bottom,#3e8ec8,#014a7e);
            
        }
    }
    .buttonbox2{
        box-sizing: border-box;
        width: 120px;
        display: flex;
        justify-content: space-around ;

        position: absolute;
        top:420px;
        left:470px;
        height: 50px;
        border-radius: 5px;
        background: linear-gradient(to bottom,#3e8ec8,#014a7e);
        span:first-of-type{
            color: white;
            font-size: 15px;
            height: 50px;
            line-height: 50px;
             padding-right: 10px;
            display: inline-block;
            border-right: 1px solid white;
        }
        span:last-of-type{
            color: white;
            font-size: 15px;
            height: 50px;
            line-height: 50px;
            display: inline-block;
        }
    }
        
     }
     .news{
        position: relative;
        top: -10px;
        align-self: center;
        width: 75%;
        height: 20px;
        display: flex;
        flex-direction: row;
        margin-bottom: 65px;
        &::before{
            content: "";
            border:17px solid transparent;
            border-right-color:#003f6d;
            border-top-color:#003f6d;
            
         }
         &::after{
            content: "";
            border:17px solid transparent;
            border-left-color:#003f6d;
            border-top-color:#003f6d;
         }
         .titlebox{
            position: relative;
            box-sizing: border-box;
            background-color:#003f6d ;
            width:10%;
            height: 34px;
            padding:7px;
            padding-left: 20px;
            
            }
            .title{
                display: block;
                background: linear-gradient(to bottom, #3c719b 50%, #074676 50%);
                height: 20px;
                color: gray;
                line-height: 20px;
                text-align: center;
            //     &::after{
            //         content: "";
            //         border:0px solid transparent;
            //         border-left-width:20px;
            //         border: linear-gradient( #3c719b 50%, #074676 50%)20;
            //         position: absolute;
            //         right: -20px;
            //         top: 0;
               
            // }
            
         }
         span{
            padding:0 50px;
            width: 1000px;
            height: 34px;
            color: #b4b4b4;
            background-color: #003f6d;
            font-size: 13px;
            line-height: 34px;
            display: block;
            overflow: hidden;
            white-space: nowarp;
         }
         
     }

     main{
        display: flex;
        flex-direction: column;
        align-items: center;
         .center{
            display: flex;
            align-self: center;
            justify-content:space-around;
            width: 1000px;
            text-align: center;
            box-shadow: 0px 5px 7px -5px;
            .box{
                height: 270px;
                border-radius: 10px;
                overflow: hidden;
                box-shadow: 0px 3px 7px -3px #000;
                margin-bottom: 50px;
                img{
                    width: 100%;
                    height: 50%;
                }
                .text{
                    height: 140px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding: 0 10px;
                    font-size: 12px;
                    line-height: 20px;
                    p{
                        margin-top: 10px;
                    }
                    box-shadow: 5px 5px -3px 5px gray;
                    }
                
            }

            
         }

        .content2{
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 1000px;
            padding-bottom:60px ;
            h2{
                margin: 10px;
            }
            .content2_1{
                display: flex;
                
                .left{
                    width: 50%;
                }
                .right{
                    padding-top: 50px;
                    width: 50%;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    
                    p:nth-of-type(2){
                        position: relative;
                        left: -63px;
                    }
                    p:nth-of-type(-n+4){
                        color: gray;
                        line-height: 30px;
                    }
                    p:nth-of-type(1){
                        font-weight: bolder;
                        margin:10px 5px;
                        color: black;
                    }

                }
                .twobutton{
                    display: flex;
                    justify-content: center;
                    margin-top: 50px; ;
                    .q1{
                        margin-right: 20px;
                        button{
                            width: 120px;
                            height: 50px;
                            border: none;
                            border-radius: 5px;
                            color: white;
                            background: linear-gradient(to bottom,#3e8ec8,#014a7e);
                        
                        }
                    }
                    .q2{
                        box-sizing: border-box;
                        width: 120px;
                        display: flex;
                        justify-content: space-around ;
                        height: 50px;
                        border-radius: 5px;
                        background: linear-gradient(to bottom,#3e8ec8,#014a7e);
                        span:first-of-type{
                            color: white;
                            font-size: 15px;
                            height: 50px;
                            line-height: 50px;
                             padding-right: 10px;
                            display: inline-block;
                            border-right: 1px solid white;
                        }
                        span:last-of-type{
                            color: white;
                            font-size: 15px;
                            height: 50px;
                            line-height: 50px;
                            display: inline-block;
                        }
                        }

                    
                }

             }
             
        }
     .anniu{
        position: relative;
        bottom: -15px;
     }
    }
    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #ebebeb;
        h2{
            margin: 50px;
        }
        .center{
            width: 1000px;
            .top{
                display: flex;
                justify-content: space-around;
                margin-bottom:30px;
                .box1{
                    display: flex;
                    color: gray;
                    .box1_2{
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        border-radius: 2px;
                        p{
                            margin-top: 25px;
                        }
                        
                        button{
                            height: 22px;
                            border: none;
                           
                            span:first-of-type{
                                background-color: #fff;
                                display: inline-block;
                                height: 22px;
                                line-height: 22px;
                                font-size: 13px;
                               border-radius: 5px 0 0 5px;
                            }
                            span:last-of-type{
                                background-color: #ed252f;
                                color: white;
                                display: inline-block;
                                height: 22px;
                                line-height: 22px;
                                font-size: 17px;
                                border-radius: 0 5px 5px 0;
                            }
                            
                        }
                        
                    }
                }
            }
            .bottom{
                display: flex;
                justify-content: space-evenly;
                margin-bottom: 30px;
                .box1{
                    display: flex;
                    color: gray;
                    .box1_2{
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        border-radius: 2px;
                        p{
                            margin-top: 25px;
                        }
                        
                        button{
                            height: 22px;
                            border: none;
                          
                            span:first-of-type{
                                background-color: #fff;
                                display: inline-block;
                                height: 22px;
                                line-height: 22px;
                                font-size: 13px;
                               border-radius: 5px 0 0 5px;
                            }
                            span:last-of-type{
                                background-color: #ed252f;
                                color: white;
                                display: inline-block;
                                height: 22px;
                                line-height: 22px;
                                font-size: 17px;
                                border-radius: 0 5px 5px 0;
                            }
                            
                        }
                        
                    }
                }
            }
        }
        .footer{
            width: 100%;
            height: 65px;
            background-color: #444444;
            font-size: 13px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            ul{
                width: 255px;
                display: flex;

                li{
                    font-size: 10px;
                    width: 85px;
                    text-align: center;
                    color: white;
                }
            }
            p{
                color: white;
            }
        }
    }
   

}